<template>
  <el-dialog
    :title="'创建触发器'"
    :visible.sync="triggerOpen"
    width="500px"
    append-to-body
    @update:visible="$emit('update:visible', $event)"
  >
    <el-form
      ref="triggerForm"
      :model="triggerForm"
      :rules="triggerRules"
      label-width="120px"
    >
      <el-form-item label="触发器描述" prop="remark">
        <el-input
          v-model="triggerForm.remark"
          type="textarea"
          placeholder="请输入触发器描述"
        />
      </el-form-item>
      <el-form-item label="触发器条件" prop="triggerCondition">
        <el-radio-group v-model="triggerForm.triggerCondition">
          <el-radio label="or">任意一个</el-radio>
          <el-radio label="and">全部</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否抑制" prop="isRestrain">
        <el-radio-group v-model="triggerForm.isRestrain">
          <el-radio label="0">否</el-radio>
          <el-radio label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="抑制时间"
        prop="intervalTime"
        v-if="triggerForm.isRestrain == '1'"
      >
        <el-input-number
          v-model="triggerForm.intervalTime"
          :min="0"
          placeholder="请输入间隔时间"
        />
        <span class="unit-label">分钟</span>
      </el-form-item>
      <el-form-item label="会话时间" prop="dataTime">
        <el-input-number
          v-model="triggerForm.dataTime"
          :min="0"
          placeholder="请输入数据时效"
        />
        <span class="unit-label">秒</span>
      </el-form-item>
      <el-form-item label="重复次数" prop="repeatNum">
        <el-input-number
          v-model="triggerForm.repeatNum"
          :min="1"
          placeholder="请输入重复次数"
        />
      </el-form-item>
      <el-form-item label="触发项类型" prop="termType">
        <el-select
          v-model="triggerForm.termType"
          placeholder="请选择触发项类型"
        >
          <el-option label="属性触发" value="property" />
          <el-option label="事件触发" value="event" />
          <el-option label="设备上下线" value="online" />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitTriggerForm">确 定</el-button>
      <el-button @click="cancelTrigger">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addTrigger, updateTrigger } from "@/api/system/iot/trigger";

export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    triggerForm: {
      type: Object,
      required: true,
    },
    ruleId: {
      type: [String, Number],
      required: true,
    },
  },
  data() {
    return {
      triggerOpen: this.visible,
      triggerRules: {
        remark: [
          { required: true, message: "触发器描述不能为空", trigger: "blur" },
        ],
        triggerCondition: [
          { required: true, message: "请选择触发器条件", trigger: "change" },
        ],
        isRestrain: [
          { required: true, message: "请选择是否抑制", trigger: "change" },
        ],
        dataTime: [
          { required: true, message: "请输入数据时效", trigger: "blur" },
        ],
        repeatNum: [
          { required: true, message: "请输入重复次数", trigger: "blur" },
          {
            type: "number",
            min: 1,
            message: "重复次数不能小于1",
            trigger: "blur",
          },
        ],
        intervalTime: [
          { required: true, message: "请输入间隔时间", trigger: "blur" },
        ],
        termType: [
          { required: true, message: "请选择触发项类型", trigger: "change" },
        ],
      },
    };
  },
  watch: {
    visible(newVal) {
      this.triggerOpen = newVal;
    },
  },
  methods: {
    submitTriggerForm() {
      this.$refs["triggerForm"].validate((valid) => {
        if (valid) {
          if (this.triggerForm.triggerId) {
            updateTrigger(this.triggerForm).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.triggerOpen = false;
              this.$emit("update:visible", false);
              this.$emit("trigger-updated", this.triggerForm);
            });
          } else {
            addTrigger(this.triggerForm).then((response) => {
              this.$modal.msgSuccess("创建成功");
              this.triggerOpen = false;
              this.$emit("update:visible", false);
              this.$emit("trigger-updated", response.data);
            });
          }
        }
      });
    },
    cancelTrigger() {
      this.triggerOpen = false;
      this.$emit("update:visible", false);
      this.$refs["triggerForm"] && this.$refs["triggerForm"].resetFields();
    },
  },
};
</script>
